<template>
	<cl-crud @load="onLoad">
		<template #slot-filter>
			<div class="filter-list">
				<div class="filter-item">
					<span class="filter-title">动作：</span>
					<el-select
						size="mini"
						filterable
						placeholder="请选择动作"
						style="width: 140px"
						v-model="selects.scene"
						@change="val => refresh({ scene: val, page: 1 })"
					>
						<el-option value label="全部"></el-option>
						<el-option label="余额充值" :value="1"></el-option>
						<el-option label="拼团中支付" :value="2"></el-option>
						<el-option label="订单支付" :value="3"></el-option>
						<el-option label="拼团失败" :value="4"></el-option>
						<el-option label="提现" :value="5"></el-option>
					</el-select>
				</div>
			</div>
		</template>
		<template #slot-time>
			<div class="filter-item">
				<span class="filter-title" style="font-size: 14px">创建时间：</span>
				<el-radio-group
					class="time-group"
					v-model="selects.createTime"
					size="mini"
					@change="onCreateTimeChange"
				>
					<el-radio-button label="今天"></el-radio-button>
					<el-radio-button label="昨天"></el-radio-button>
					<el-radio-button label="最近7天"></el-radio-button>
					<el-radio-button label="最近30天"></el-radio-button>
					<el-radio-button label="本月"></el-radio-button>
					<el-radio-button label="全部"></el-radio-button>
				</el-radio-group>
			</div>
		</template>
	</cl-crud>
</template>

<script>
import moment from 'moment';
export default {
	name: 'consume',
	data() {
		return {
			crud: null,
			selectRow: [],
			selects: {
				createTime: '今天',
				scene: ''
			}
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.cash.consumeLogs)
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '用户ID',
							prop: 'userId',
							align: 'center'
						},
						{
							label: '用户昵称',
							prop: 'username',
							align: 'center',
							emptyText: '暂无'
						},
						{
							label: '手机号码',
							prop: 'phone',
							align: 'center',
							emptyText: '暂无'
						},
						{
							label: '余额',
							prop: 'balance',
							align: 'center'
						},
						{
							label: '动作',
							prop: 'remark',
							align: 'center'
						},
						{
							label: '金额',
							prop: 'consume',
							align: 'center'
						},
						{
							label: '交易号',
							prop: 'tradeNo',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center'
						}
					],
					op: {
						visible: false
					},
					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
					['slot-time'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			let params = {};
			if (this.selects.createTime === '今天') {
				params.startTime = moment().format('YYYY-MM-DD 00:00:00');
				params.endTime = moment().format('YYYY-MM-DD 23:59:59');
			}
			app.refresh(params);
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		onCreateTimeChange(val) {
			let params = {};
			if (val === '今天') {
				params.startTime = moment().format('YYYY-MM-DD 00:00:00');
				params.endTime = moment().format('YYYY-MM-DD 23:59:59');
			}
			if (val === '昨天') {
				params.startTime = moment(new Date())
					.add(-1, 'days')
					.format('YYYY-MM-DD 00:00:00');
				params.endTime = moment(new Date())
					.add(-1, 'days')
					.format('YYYY-MM-DD 23:59:59');
			}
			if (val === '最近7天') {
				params.startTime = moment(new Date())
					.add(-6, 'days')
					.format('YYYY-MM-DD 00:00:00');
				params.endTime = moment(new Date()).format('YYYY-MM-DD 23:59:59');
			}
			if (val === '最近30天') {
				params.startTime = moment(new Date())
					.add(-29, 'days')
					.format('YYYY-MM-DD 00:00:00');
				params.endTime = moment(new Date()).format('YYYY-MM-DD 23:59:59');
			}
			if (val === '本月') {
				params.startTime = moment(
					moment()
						.month(moment().month())
						.startOf('month')
						.valueOf()
				).format('YYYY-MM-DD 00:00:00');
				params.endTime = moment().format('YYYY-MM-DD 23:59:59');
			}
			if (val === '全部') {
				params.startTime = null;
				params.endTime = null;
			}
			this.refresh(params);
		}
	}
};
</script>

<style lang="stylus" scoped>
/deep/.time-group {
    .el-radio-button {
        margin-right 10px;
        .el-radio-button__inner {
            border 1px solid #DCDFE6
            border-radius 4px
            box-shadow: 0 0 0
        }
    }
}
</style>
